<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name='viewport' content="width=device-width, initial-scale=1" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="/assets/styles.css" />
    <title>
      {applicationName} {applicationVersion} - Webserver
    </title>
    <style type="text/css" media="screen" xml:space="preserve">
    /*<![CDATA[*/
    #map {
      box-shadow: 0px 0px 18px #000000;
      border-radius: 25px;
      margin: 0em;
    }

    #navigation {
      z-index: 2;
      position:absolute;
      bottom: 0;
      right: 0;
      margin: 0;
    }

    #mapcontainer {
      z-index: 1;
      position:relative;
    }

    #navtable {
      margin: 0;
    }

    /*]]>*/
    </style>
    <script type="text/javascript" src="/assets/scripts.js" xml:space="preserve">
    </script>
    <script type="text/javascript" src="/assets/uitoggle.js" xml:space="preserve">
    </script>
    <script type="text/javascript" xml:space="preserve">
    //<![CDATA[

      sessionStorage.setItem("activeUI", "legacy");

      var timeoutHandle = 0;
      var currentInterval = -1;

      function refreshPage() {
        refreshMapPage();
      }

    //]]>
    </script>
  </head>
  <body onload="refreshMapPage()" onresize="reloadMap()">
    <div id="header">
      <form id="refreshform" name="refreshform">
        <p>
          - Map - <a href="/flightplan.html">Flight Plan</a> - <a href="/aircraft.html">Aircraft</a> - <a href=
          "/progress.html">Aircraft Progress</a> - <a href="/airport.html">Airport</a> - <a href="{helpUrl}">Help</a>
          -  {maprefreshsel} <button type="button" onclick="reloadMap()">Reload Map</button> <button type="button"
          onclick="submitMapUserCmd()">User Aircraft</button> <button type="button" onclick=
          "submitMapRouteCmd()">Flight Plan</button> <button type="button" onclick=
          "toggleFitMap()">Toggle "fit map"</button>
        </p>
      </form>
      <form id="airportform" action="javascript:submitMapAirportCmd()" name="airportform">
        <p>
          <input id="airporttext" type="text" name="airportident" value="" /> <button type="button" onclick=
          "submitMapAirportCmd()">Show Airport</button>
        </p>
      </form>
      <form id="extrasform" name="extrasform">
        <p>
          <button type="button" onclick=
          "toggleLegacyUI()">Toggle "new ui"</button>
        </p>
      </form>
    </div>
    <div id="mapcontainer" style="width: 100%; height: 100%;">
      <img id="map" src="images/littlenavmap.svg" alt="Map" />
      <div id="navigation" style="width: 100%; height: 100%;">
        <table id="navtable" style="text-align: center; width: 100%; height: 100%;" border="0" cellspacing="0"
        cellpadding="20" summary="">
          <tbody>
            <tr>
              <td onclick="submitMapCmd('in')" style="cursor: zoom-in; text-align: left; vertical-align: top;">
                <img src="images/in.svg" alt="In" />
              </td>
              <td onclick="submitMapCmd('up')" style="cursor: n-resize; text-align: center; vertical-align: top;">
                <img src="images/up.svg" alt="Up" />
              </td>
              <td onclick="submitMapCmd('out')" style="cursor: zoom-out; text-align: right; vertical-align: top;">
                <a href="javascript:submitMapCmd('out')"><img src="images/out.svg" alt="Out" /></a>
              </td>
            </tr>
            <tr>
              <td onclick="submitMapCmd('left')" style="cursor: w-resize; text-align: left;">
                <img src="images/left.svg" alt="Left" />
              </td>
              <td onclick="submitMapCmd('in')" style="cursor: zoom-in; text-align: left; vertical-align: bottom;"></td>
              <td onclick="submitMapCmd('right')" style="cursor: e-resize; text-align: right;">
                <img src="images/right.svg" alt="Right" />
              </td>
            </tr>
            <tr>
              <td onclick="reloadMap()" style="cursor: pointer; text-align: left; vertical-align: bottom;">
                <img src="images/reload.svg" alt="Reload" />
              </td>
              <td onclick="submitMapCmd('down')" style="cursor: s-resize; text-align: center; vertical-align: bottom;">
                <img src="images/down.svg" alt="Down" />
              </td>
              <td onclick="reloadMap()" style="cursor: pointer; text-align: left; vertical-align: bottom;"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>
